<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
			background-image: url(抽奖.jpg);
			background-repeat: no-repeat;
			background-size:100% ;
			}
		 #dra,#draw{
		 	position: fixed;
				top:190px;
				left:50%;
				font-size:30px ;
		 }
		 
			#draw{
				width: 150px;
				border: 1px solid black;
				height: 50px;
				text-align: center;
			}
			#dra{
				margin-top: 50px;
			}
			#dn{
				width: 150px;
				border: 1px solid black;
				margin-top: 180px;
				height: 300px;
				overflow: scroll;
				position: fixed;
				left:36%;
				font-size:30px ;
				color: #7CFC00;/* 字体颜色 */
				text-align: center;/*选到的字体居中 去掉左靠齐 */
			}
		</style>
	</head>
	<body>
		<div id="draw"></div>
		<div id="dn"></div>
		<script>
			var list=['王','林','李','张','刘','陈','杨','黄','田','赵','周'];
			var dr=document.getElementById('draw');
			var d=document.getElementById('dn');
			var clickNum=0;
			var dsq,num;
			function number(){
				clickNum++;
				if(clickNum%2==0){
					 stop()
				}else{
					start();
				}
			}
				function start(){
				num=parseInt(Math.random()*list.length);
				console.log(list[num]);
				dr.innerHTML=list[num]  ;				
				dsq=window.setTimeout("start()",30);
			}
				
			function stop(){
				d.innerHTML+=list[num]+"<br/>";
				list.splice(num,1);
				window.clearTimeout(dsq);
			}              
		</script>
		<div id="dra"><input type="button" value="开始抽奖" onclick="number()"/></div>
		
	</body>
</html>
